<template>
  <div id="app" :class="{'is_pc': isPc}">
    <router-view/>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  created () {
    // this.Bus.theme = 'light'
    // this.utils.saveStorage('theme', 'light')
    this.isPc = this.$route.meta.isPC
  },
  data () {
    return {
      isPc: true
    }
  },
  mounted () {
    // 自定义一套动画规则
    this.createLineMove()
  },
  methods: {
    createLineMove() {
      const style = document.styleSheets[0]
      let str = ''
      for (let i = 0; i <= 100; i++) {
        str += `${i}% {
            background-image: linear-gradient(90deg, rgba(0, 244, 254, 0) 9%, #42F8FE ${10 + i * 0.7}%, #A2FCFF ${15 + i * 0.7}%, #42F8FE ${20 + i * 0.7}%, rgba(0,244,254,0.00) 91%);
          }`
      }
      let titleStr = ''
      for (let i = 0; i <= 10; i++) {
        titleStr += `${i}% {
            background-image: linear-gradient(60deg, rgba(0, 244, 254, 1) 0%, rgba(0, 244, 254, 1) 100%);
          }`
      }
      for (let i = 10; i <= 90; i++) {
        const currentI = (i - 10) * 1.5
        titleStr += `${i}% {
            background-image: linear-gradient(60deg, rgba(0, 244, 254, 1) 0%, #42F8FE ${currentI - 20}%, #A2FCFF ${currentI - 10}%, #42F8FE ${currentI}%, rgba(0, 244, 254, 1) 100%);
          }`
      }
      for (let i = 90; i <= 100; i++) {
        titleStr += `${i}% {
            background-image: linear-gradient(60deg, rgba(0, 244, 254, 1) 0%, rgba(0, 244, 254, 1) 100%);
          }`
      }
      style.insertRule(`@keyframes line_move {${str}}`)
      style.insertRule(`@keyframes title_move {${titleStr}}`)
    }
  }
}
</script>
<style lang='less'>
  @import "~@static/css/main.css";
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: var(--font-color-default);
  }
  .is_pc {
    min-width: 960PX;
  }
  #nav {
    padding: 30px;
  }

  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>
